@babel/plugin-syntax-typescript

What is @babel/plugin-syntax-typescript?

The @babel/plugin-syntax-typescript package is a plugin for Babel that allows Babel to parse TypeScript syntax. This means it enables Babel to understand TypeScript code, but it does not perform type checking or compilation to JavaScript. It's primarily used in projects that want to take advantage of Babel's transformations and plugins while writing their code in TypeScript.

What are @babel/plugin-syntax-typescript's main functionalities?

Parsing TypeScript Syntax

This feature allows Babel to parse TypeScript code, including imports, exports, interfaces, and type annotations, without performing type checking. It's useful for projects that use Babel for code transformation and want to write their source code in TypeScript.

import { foo } from 'bar';
interface MyInterface {
  myProperty: string;
}
const myVar: MyInterface = { myProperty: 'Hello' };

Other packages similar to @babel/plugin-syntax-typescript

typescript

The TypeScript package is the official compiler for TypeScript. Unlike @babel/plugin-syntax-typescript, it performs both parsing and compilation of TypeScript code into JavaScript, including type checking. It's a more comprehensive solution for projects that are exclusively using TypeScript.

@typescript-eslint/parser

This package is an ESLint parser that allows ESLint to lint TypeScript code. It's similar to @babel/plugin-syntax-typescript in that it enables understanding of TypeScript syntax, but it's specifically focused on linting rather than transforming code.

ts-node

ts-node is a TypeScript execution engine and REPL for Node.js. It allows you to directly run TypeScript files in Node.js without pre-compiling them. This is different from @babel/plugin-syntax-typescript, which only parses TypeScript syntax for Babel transformations and does not include an execution environment.

README

@babel/plugin-syntax-typescript

Allow parsing of TypeScript syntax

See our website @babel/plugin-syntax-typescript for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-syntax-typescript

or using yarn:

yarn add @babel/plugin-syntax-typescript --dev

Changelog

v7.25.4 (2024-08-22)

:bug: Bug Fix

• babel-traverse
  • #16756 fix: Skip computed key when renaming (@liuxingbaoyu)
• babel-helper-create-class-features-plugin, babel-plugin-proposal-decorators
  • #16755 fix: Decorator 2018-09 may throw an exception (@liuxingbaoyu)
• babel-types
  • #16710 Visit AST fields nodes according to their syntactical order (@nicolo-ribaudo)
• babel-generator
  • #16709 Print semicolon after TS export namespace as A (@nicolo-ribaudo)

:nail_care: Polish

• babel-generator, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-pipeline-operator, babel-plugin-transform-class-properties, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-plugin-transform-private-methods, babel-plugin-transform-private-property-in-object, babel-plugin-transform-typescript, babel-runtime-corejs2, babel-runtime, babel-traverse
  • #16722 Avoid unnecessary parens around sequence expressions (@nicolo-ribaudo)
• babel-generator, babel-plugin-transform-class-properties
  • #16714 Avoid unnecessary parens around exported arrow functions (@nicolo-ribaudo)
• babel-generator, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-transform-object-rest-spread
  • #16712 Avoid printing unnecessary parens around object destructuring (@nicolo-ribaudo)

:microscope: Output optimization

• babel-generator
  • #16740 Avoid extra spaces between comments/regexps in compact mode (@nicolo-ribaudo)